<!DOCTYPE html>
<html>

	<head>
		<title>警告列表</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8" />

		<link rel="icon" type="image/ico" href="http://tattek.com/minimal/assets/images/favicon.ico" />
		<!-- Bootstrap -->
		<link href="assets/css/vendor/bootstrap/bootstrap.min.css" rel="stylesheet">
		<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
		<link rel="stylesheet" href="assets/css/vendor/animate/animate.css">
		<link type="text/css" rel="stylesheet" media="all" href="assets/js/vendor/mmenu/css/jquery.mmenu.all.css" />
		<link rel="stylesheet" href="assets/js/vendor/videobackground/css/jquery.videobackground.css">
		<link rel="stylesheet" href="assets/css/vendor/bootstrap-checkbox.css">

		<link rel="stylesheet" href="assets/js/vendor/chosen/css/chosen.min.css">
		<link rel="stylesheet" href="assets/js/vendor/chosen/css/chosen-bootstrap.css">
		<link rel="stylesheet" href="assets/js/vendor/datatables/css/dataTables.bootstrap.css">
		<link rel="stylesheet" href="assets/js/vendor/datatables/css/ColVis.css">
		<link rel="stylesheet" href="assets/js/vendor/datatables/css/TableTools.css">
		<link href="assets/css/minimal.css" rel="stylesheet">
	</head>

	<body class="bg-1">
		<div class="mask">
			<div id="loader"></div>
		</div>
		<div id="wrap">
			<div class="row">

				<!-- 导航栏-->
				<div class="navbar navbar-default navbar-fixed-top navbar-transparent-black mm-fixed-top" role="navigation" id="navbar">
					<div class="navbar-header col-md-2">
						<a class="navbar-brand" href="index.html">
							<strong>智慧园区</strong>后台管理
						</a>
						<div class="sidebar-collapse">
							<a href="#">
								<i class="fa fa-bars"></i>
							</a>
						</div>
					</div>
					<div class="navbar-collapse">
						<!--左边刷新按钮-->
						<ul class="nav navbar-nav refresh">
							<li class="divided">
								<a href="#" class="page-refresh"><i class="fa fa-refresh"></i></a>
							</li>
						</ul>
						<!--右边用户-->
						<ul class="nav navbar-nav quick-actions">
							<li class="dropdown divided user" id="current-user">
								<div class="profile-photo">
								</div>
								<a class="dropdown-toggle options" data-toggle="dropdown" href="#">
									admin<i class="fa fa-caret-down"></i>
								</a>
								<!--鼠标悬浮框-->
								<ul class="dropdown-menu arrow settings">
									<li>
										<h3>背景颜色:</h3>
										<ul id="color-schemes">
											<li>
												<a href="#" class="bg-1"></a>
											</li>
											<li>
												<a href="#" class="bg-2"></a>
											</li>
											<li>
												<a href="#" class="bg-3"></a>
											</li>
											<li>
												<a href="#" class="bg-4"></a>
											</li>
											<li>
												<a href="#" class="bg-5"></a>
											</li>
											<li>
												<a href="#" class="bg-6"></a>
											</li>
										</ul>
									</li>
									<li class="divider"></li>
									<li>
										<a href="#"><i class="fa fa-user"></i> Profile</a>
									</li>
									<li class="divider"></li>
									<li>
										<a href="#"><i class="fa fa-power-off"></i> Logout</a>
									</li>
								</ul>
							</li>
						</ul>

						<!--左下-->
						<ul class="nav navbar-nav side-nav" id="sidebar">
							<li class="collapsed-content">
								<ul>
									<li class="search">
										<!-- Collapsed search pasting here at 768px -->
									</li>
								</ul>
							</li>
							<!--菜单-->
							<li class="navigation" id="navigation">
								<ul class="menu">
									<li class="dropdown">
										<a href="#" class="dropdown-toggle" data-toggle="dropdown">
											<i class="fa fa-tachometer"></i>设备管理<b class="fa fa-plus dropdown-plus"></b>
										</a>
										<ul class="dropdown-menu">
											<li>
												<a href="device-list.html">
													<i class="fa fa-caret-right"></i>设备列表
												</a>
											</li>
										</ul>
									</li>

									<li class="dropdown  open active">
										<a href="#" class="dropdown-toggle" data-toggle="dropdown">
											<i class="fa fa-list"></i>告警列表<b class="fa fa-plus dropdown-plus"></b>
										</a>
										<ul class="dropdown-menu">
											<li class="active">
												<a href="warnning-list.html">
													<i class="fa fa-caret-right"></i>历史告警列表
												</a>
											</li>
										</ul>
									</li>

									<li class="dropdown">
										<a href="#" class="dropdown-toggle" data-toggle="dropdown">
											<i class="fa fa-pencil"></i>系统管理<b class="fa fa-plus dropdown-plus"></b>
										</a>
										<ul class="dropdown-menu">
											<li>
												<a href="user-list.html">
													<i class="fa fa-caret-right"></i>账号管理
												</a>
											</li>
											<li>
												<a href="role-list.html">
													<i class="fa fa-caret-right"></i>角色管理
												</a>
											</li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</div>
				</div>

				<!-- 主要内容-->
				<div id="content" class="col-md-12">
					
					<section class="tile transparent col-md-10">
						<div class="tile-header transparent">
							<h1><strong>历史告警</strong> </h1>
						</div>
						<div class="tile-body color transparent-black rounded-corners">
							<div class="table-responsive">
								<table class="table table-datatable table-custom" id="inlineEditDataTable">
									<thead>
										<tr>
											<th class="text-center">#</th>
											<th class="text-center">发生时间</th>
											<th class="text-center">告警设备</th>
											<th class="text-center">告警内容</th>
											<th class="text-center">操作</th>
										</tr>
									</thead>
									<tbody>
										<tr class="odd gradeX">
											<td class="text-center">1</td>
											<td class="text-center">07/19 15:27</td>
											<td class="text-center">烟感</td>
											<td class="text-center">烟雾报警</td>
											<td class="actions text-center">
												<a class="edit" href="#">查看</a>
												<a class="delete" href="#">删除</a>
											</td>
										</tr>
										<tr class="odd gradeX">
											<td class="text-center">1</td>
											<td class="text-center">07/19 15:27</td>
											<td class="text-center">烟感</td>
											<td class="text-center">烟雾报警</td>
											<td class="actions text-center">
												<a class="edit" href="#">查看</a>
												<a class="delete" href="#">删除</a>
											</td>
										</tr>
										<tr class="odd gradeX">
											<td class="text-center">1</td>
											<td class="text-center">07/19 15:27</td>
											<td class="text-center">烟感</td>
											<td class="text-center">烟雾报警</td>
											<td class="actions text-center">
												<a class="edit" href="#">查看</a>
												<a class="delete" href="#">删除</a>
											</td>
										</tr>
										<tr class="odd gradeX">
											<td class="text-center">1</td>
											<td class="text-center">07/19 15:27</td>
											<td class="text-center">烟感</td>
											<td class="text-center">烟雾报警</td>
											<td class="actions text-center">
												<a class="edit" href="#">查看</a>
												<a class="delete" href="#">删除</a>
											</td>
										</tr>
										<tr class="odd gradeX">
											<td class="text-center">1</td>
											<td class="text-center">07/19 15:27</td>
											<td class="text-center">烟感</td>
											<td class="text-center">烟雾报警</td>
											<td class="actions text-center">
												<a class="edit" href="#">查看</a>
												<a class="delete" href="#">删除</a>
											</td>
										</tr>
										<tr class="odd gradeX">
											<td class="text-center">1</td>
											<td class="text-center">07/19 15:27</td>
											<td class="text-center">烟感</td>
											<td class="text-center">烟雾报警</td>
											<td class="actions text-center">
												<a class="edit" href="#">查看</a>
												<a class="delete" href="#">删除</a>
											</td>
										</tr>
										<tr class="odd gradeX">
											<td class="text-center">1</td>
											<td class="text-center">07/19 15:27</td>
											<td class="text-center">烟感</td>
											<td class="text-center">烟雾报警</td>
											<td class="actions text-center">
												<a class="edit" href="#">查看</a>
												<a class="delete" href="#">删除</a>
											</td>
										</tr>
										<tr class="odd gradeX">
											<td class="text-center">1</td>
											<td class="text-center">07/19 15:27</td>
											<td class="text-center">烟感</td>
											<td class="text-center">烟雾报警</td>
											<td class="actions text-center">
												<a class="edit" href="#">查看</a>
												<a class="delete" href="#">删除</a>
											</td>
										</tr>
										<tr class="odd gradeX">
											<td class="text-center">1</td>
											<td class="text-center">07/19 15:27</td>
											<td class="text-center">烟感</td>
											<td class="text-center">烟雾报警</td>
											<td class="actions text-center">
												<a class="edit" href="#">查看</a>
												<a class="delete" href="#">删除</a>
											</td>
										</tr>
										<tr class="odd gradeX">
											<td class="text-center">1</td>
											<td class="text-center">07/19 15:27</td>
											<td class="text-center">烟感</td>
											<td class="text-center">烟雾报警</td>
											<td class="actions text-center">
												<a class="edit" href="#">查看</a>
												<a class="delete" href="#">删除</a>
											</td>
										</tr>
										<tr class="odd gradeX">
											<td class="text-center">1</td>
											<td class="text-center">07/19 15:27</td>
											<td class="text-center">烟感</td>
											<td class="text-center">烟雾报警</td>
											<td class="actions text-center">
												<a class="edit" href="#">查看</a>
												<a class="delete" href="#">删除</a>
											</td>
										</tr>
										<tr class="odd gradeX">
											<td class="text-center">1</td>
											<td class="text-center">07/19 15:27</td>
											<td class="text-center">烟感</td>
											<td class="text-center">烟雾报警</td>
											<td class="actions text-center">
												<a class="edit" href="#">查看</a>
												<a class="delete" href="#">删除</a>
											</td>
										</tr>
										<tr class="odd gradeX">
											<td class="text-center">1</td>
											<td class="text-center">07/19 15:27</td>
											<td class="text-center">烟感</td>
											<td class="text-center">烟雾报警</td>
											<td class="actions text-center">
												<a class="edit" href="#">查看</a>
												<a class="delete" href="#">删除</a>
											</td>
										</tr>
										<tr class="odd gradeX">
											<td class="text-center">1</td>
											<td class="text-center">07/19 15:27</td>
											<td class="text-center">烟感</td>
											<td class="text-center">烟雾报警</td>
											<td class="actions text-center">
												<a class="edit" href="#">查看</a>
												<a class="delete" href="#">删除</a>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</section>

				</div>
			</div>
		</div>
		<section class="videocontent" id="video"></section>
		<script src="https://code.jquery.com/jquery.js"></script>
		<script src="assets/js/vendor/bootstrap/bootstrap.min.js"></script>
		<script type="text/javascript" src="assets/js/vendor/mmenu/js/jquery.mmenu.min.js"></script>
		<script type="text/javascript" src="assets/js/vendor/sparkline/jquery.sparkline.min.js"></script>
		<script type="text/javascript" src="assets/js/vendor/nicescroll/jquery.nicescroll.min.js"></script>
		<script type="text/javascript" src="assets/js/vendor/animate-numbers/jquery.animateNumbers.js"></script>
		<script type="text/javascript" src="assets/js/vendor/videobackground/jquery.videobackground.js"></script>
		<script type="text/javascript" src="assets/js/vendor/blockui/jquery.blockUI.js"></script>\

		<script src="assets/js/vendor/datatables/jquery.dataTables.min.js"></script>
		<script src="assets/js/vendor/datatables/ColReorderWithResize.js"></script>
		<script src="assets/js/vendor/datatables/colvis/dataTables.colVis.min.js"></script>
		<script src="assets/js/vendor/datatables/tabletools/ZeroClipboard.js"></script>
		<script src="assets/js/vendor/datatables/tabletools/dataTables.tableTools.min.js"></script>
		<script src="assets/js/vendor/datatables/dataTables.bootstrap.js"></script>

		<script src="assets/js/vendor/chosen/chosen.jquery.min.js"></script>

		<script src="assets/js/minimal.min.js"></script>

		<script>
			$(function() {

				// Add custom class to pagination div
				$.fn.dataTableExt.oStdClasses.sPaging = 'dataTables_paginate paging_bootstrap paging_custom';

				/*************************************************/
				/**************** BASIC DATATABLE ****************/
				/*************************************************/

				/* Define two custom functions (asc and desc) for string sorting */
				jQuery.fn.dataTableExt.oSort['string-case-asc'] = function(x, y) {
					return((x < y) ? -1 : ((x > y) ? 1 : 0));
				};

				jQuery.fn.dataTableExt.oSort['string-case-desc'] = function(x, y) {
					return((x < y) ? 1 : ((x > y) ? -1 : 0));
				};

				/* Add a click handler to the rows - this could be used as a callback */
				$("#basicDataTable tbody tr").click(function(e) {
					if($(this).hasClass('row_selected')) {
						$(this).removeClass('row_selected');
					} else {
						oTable01.$('tr.row_selected').removeClass('row_selected');
						$(this).addClass('row_selected');
					}

					// FadeIn/Out delete rows button
					if($('#basicDataTable tr.row_selected').length > 0) {
						$('#deleteRow').stop().fadeIn(300);
					} else {
						$('#deleteRow').stop().fadeOut(300);
					}
				});

				/* Build the DataTable with third column using our custom sort functions */
				var oTable01 = $('#basicDataTable').dataTable({
					"sDom": "R<'row'<'col-md-6'l><'col-md-6'f>r>" +
						"t" +
						"<'row'<'dataTables_infodataTables_infodataTables_infodataTables_info'i><'col-md-4'><'col-md-4 text-right sm-center'p>>",
					"oLanguage": {
						"sSearch": ""
					},
					"aaSorting": [
						[0, 'asc'],
						[1, 'asc']
					],
					"aoColumns": [
						null,
						null,
						{
							"sType": 'string-case'
						},
						null,
						null
					],
					"fnInitComplete": function(oSettings, json) {
						$('.dataTables_filter input').attr("placeholder", "Search");
					}
				});

				// Append delete button to table
				var deleteRowLink = '<a href="#" id="deleteRow" class="btn btn-red btn-xs delete-row">Delete selected row</a>'
				$('#basicDataTable_wrapper').append(deleteRowLink);

				/* Add a click handler for the delete row */
				$('#deleteRow').click(function() {
					var anSelected = fnGetSelected(oTable01);
					if(anSelected.length !== 0) {
						oTable01.fnDeleteRow(anSelected[0]);
						$('#deleteRow').stop().fadeOut(300);
					}
				});

				/* Get the rows which are currently selected */
				function fnGetSelected(oTable01Local) {
					return oTable01Local.$('tr.row_selected');
				};

				/*******************************************************/
				/**************** INLINE EDIT DATATABLE ****************/
				/*******************************************************/

				function restoreRow(oTable02, nRow) {
					var aData = oTable02.fnGetData(nRow);
					var jqTds = $('>td', nRow);

					for(var i = 0, iLen = jqTds.length; i < iLen; i++) {
						oTable02.fnUpdate(aData[i], nRow, i, false);
					}

					oTable02.fnDraw();
				};

				function editRow(oTable02, nRow) {
					var aData = oTable02.fnGetData(nRow);
					var jqTds = $('>td', nRow);
					jqTds[0].innerHTML = '<input type="text" value="' + aData[0] + '">';
					jqTds[1].innerHTML = '<input type="text" value="' + aData[1] + '">';
					jqTds[2].innerHTML = '<input type="text" value="' + aData[2] + '">';
					jqTds[3].innerHTML = '<input type="text" value="' + aData[3] + '">';
					jqTds[4].innerHTML = '<a class="edit save" href="#">保存</a><a class="delete" href="#">删除</a>';
				};

				function saveRow(oTable02, nRow) {
					var jqInputs = $('input', nRow);
					oTable02.fnUpdate(jqInputs[0].value, nRow, 0, false);
					oTable02.fnUpdate(jqInputs[1].value, nRow, 1, false);
					oTable02.fnUpdate(jqInputs[2].value, nRow, 2, false);
					oTable02.fnUpdate(jqInputs[3].value, nRow, 3, false);
					oTable02.fnUpdate(jqInputs[4].value, nRow, 4, false);
					oTable02.fnUpdate('<a class="edit" href="#">编辑</a><a class="delete" href="#">删除</a>', nRow, 5, false);
					oTable02.fnDraw();
				};

				var oTable02 = $('#inlineEditDataTable').dataTable({
					"sDom": "R<'row'<'col-md-6'l><'col-md-6'f>r>" +
						"t" +
						"<'row'<'col-md-4 sm-center'i><'col-md-4'><'col-md-4 text-right sm-center'p>>",
					"oLanguage": {
						"sSearch": ""
					},
					"aoColumnDefs": [{
						'bSortable': false,
						'aTargets': ["no-sort"]
					}],
					"fnInitComplete": function(oSettings, json) {
						$('.dataTables_filter input').attr("placeholder", "搜索");
					}
				});

				// Append add row button to table
				var addRowLink = '<a href="#" id="addRow" class="btn btn-blue btn-xs add-row">新增</a>'
				$('#inlineEditDataTable_wrapper').append(addRowLink);

				var nEditing = null;

				// Add row initialize
				$('#addRow').click(function(e) {
					e.preventDefault();

					// Only allow a new row when not currently editing
					if(nEditing !== null) {
						return;
					}

					var aiNew = oTable02.fnAddData(['', '', '', '', '', '<a class="edit" href="">编辑</a>', '<a class="delete" href="">删除</a>']);
					var nRow = oTable02.fnGetNodes(aiNew[0]);
					editRow(oTable02, nRow);
					nEditing = nRow;

					$(nRow).find('td:last-child').addClass('actions text-center');
				});

				// Delete row initialize
				$(document).on("click", "#inlineEditDataTable a.delete", function(e) {
					e.preventDefault();

					var nRow = $(this).parents('tr')[0];
					oTable02.fnDeleteRow(nRow);
				});

				// Edit row initialize
				$(document).on("click", "#inlineEditDataTable a.edit", function(e) {
					e.preventDefault();

					/* Get the row as a parent of the link that was clicked on */
					var nRow = $(this).parents('tr')[0];

					if(nEditing !== null && nEditing != nRow) {
						/* A different row is being edited - the edit should be cancelled and this row edited */
						restoreRow(oTable02, nEditing);
						editRow(oTable02, nRow);
						nEditing = nRow;
					} else if(nEditing == nRow && this.innerHTML == "Save") {
						/* This row is being edited and should be saved */
						saveRow(oTable02, nEditing);
						nEditing = null;
					} else {
						/* No row currently being edited */
						editRow(oTable02, nRow);
						nEditing = nRow;
					}
				});

				/****************************************************/
				/**************** ADVANCED DATATABLE ****************/
				/****************************************************/

				$('.DTTT_button_collection').on('click', function() {
					var newtop = $('.DTTT_dropdown').position().top - 45;
					$('.DTTT_dropdown').css('top', newtop + 'px');
				});

				//initialize chosen
				$('.dataTables_length select').chosen({
					disable_search_threshold: 10
				});

			})
		</script>
	</body>

</html>